<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">发ajax请求(jsonp)</button>

    <script>
        /* 
        jsonp
            简单来说: 利用script发送跨域请求
            前台:
                创建script标签,指定src为跨域的请求url
                定义一个接收数据的函数,并将函数名指定为query参数
            后台:
                确定要返回的响应数据data后,读取回调函数名
                返回函数调用的js代码: callback(data)
                const data = 'xxx';
                const callback = req.query.callback;
                res.send(`${callback(${data})`);

        */

    document.querySelector('#btn').onclick = () => {
        //创建script标签,指定src为跨域的请求url
        const script =document.createElement('script');
        script.src='http://localhost:8081/jsonp-server?callback=fn'
        //将script标签添加到body中 => 浏览器就会自动发送请求
        document.body.appendChild(script);
    }
    //定义一个接受数据的函数,并将函数名指定为query参数
    function fn(data){
        console.log(data);
        alert(data);
    }

    </script>
</body>

</html>